<template>
  <div class="MyDJI">
    <mydjitopnav />
    <div class="container main">
      <div class="MyDJI-information">
        <div class="informationList">
          <ul>
            <li>
              <router-link :to="'/mydji/information'">
                <div class="icon"></div>
                <span>账户信息</span>
              </router-link>
            </li>
            <li>
              <span class="title">订单</span>
              <router-link :to="'/mydji/myorder'">
                <div class="icon"></div>
                <span>我的订单</span>
              </router-link>
            </li>
            <li>
              <span class="title">设置</span>
              <router-link :to="'/mydji/address'">
                <div class="icon"></div>
                <span>我的收货地址</span>
              </router-link>
            </li>
          </ul>
        </div>
        <div class="plate">
          <router-view></router-view>
        </div>
      </div>
    </div>
    <bottomnav />
  </div>
</template>
<script>
import bottomnav from "../components/BottomNav.vue";
import mydjitopnav from "../components/MyDjiTopNav.vue";
// import a from '../assets/img/index/img/'
export default {
  components: { bottomnav, mydjitopnav },
};
</script>

<style lang="scss" scoped>
.MyDJI {
  .main {
    margin: 50px auto 70px;
    // .MyDJI-top {
    //   text-align: left;
    // }
    .MyDJI-information {
      text-align: left;
      display: flex;
      justify-content: space-between;
      .informationList {
        width: 292px;
        height: fit-content;
        background-color: white;
        padding: 12px 27px 60px;
        // box-sizing: content-box;
        ul {
          font-size: 16px;
          li {
            margin: 0 0 18px;
            .title {
              font-size: 14px;
              margin-left: 12px;
            }
            a {
              display: flex;
              margin-top: 12px;
              .icon {
                width: 32px;
                height: 32px;
                background-image: url('../assets/img/index/img/ia_10017.jpg');
                background-size: cover;
              }
              span {
                display: block;
                line-height: 32px;
                margin-left: 10px;
              }
            }
          }
        }
      }
      .plate {
        width: 918px;
      }
    }
  }
}
</style>